<template>
	<view>
		<!-- 复选框 listchecklist赋值选中的项-->
		<checkbox-group @change="changeCheckbox" shape="circle" style="display: block">
			<!-- 搜索后，对LIST内容进行循环，列出所有可划拨的机器 -->
			<view style="display: flex;flex-direction: column;">
				<uni-swipe-action>
					<uni-swipe-action-item v-for="(item, index) in kucun_list" :key="item.id" :right-options="options"
						@click="handleSwipeClick($event, index)">
						<view style="display: flex;background-color: white;margin: 20rpx auto;width:730rpx;">
							<view style="display: flex;flex-direction: row;margin-left: 15rpx;">
								<view style="display: flex;flex-direction: row;align-items: center;">
									<!-- 前面的复选框 -->
									<checkbox :value="item" :checked="checkedArr.includes(item)"
										:class="{'checked':checkedArr.includes(item)}"></checkbox>
									<!-- 开始循环的内容 -->
									<view style="display: flex;flex-direction: column; background-color: white;">
										<view style="display: flex;margin: 20rpx 0 20rpx 15rpx;">
											<view style="display: flex;	">
												<image style="width: 180rpx;height: 180rpx;	"
													:src="item.tupian_url[0].url" mode=""></image>
											</view>
											<view
												style="display: flex;flex-direction: column;color: #666666;margin-left: 15rpx;justify-content: space-around;">
												<text
													style="margin-top: 5rpx;font-size: 29rpx;">{{item.goods_name}}</text>
												<text
													style="display: flex;margin-top: 5rpx;color: #999999;background-color:#FAFAFA ;font-size: 25rpx;border-radius: 8rpx;justify-content: center;align-items: center;width:150rpx;height:40rpx;border: 2rpx solid #EBEBEB;">{{item.color}}-{{item.size}}</text>
												<view
													style="display: flex;justify-content: space-between;width:430rpx;">
													<text style="margin-top: 5rpx;">￥{{item.goods_price}}</text>
													<uni-number-box :min="1" :max="item.count" :value="item.count"
														@change="handleChange(item,$event,index)"></uni-number-box>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
		</checkbox-group>

		<view
			style="position: fixed;bottom: 100rpx;color: #666666; display: flex;width: 100%;height: 100rpx;background-color: white;align-items: center;justify-content: space-between;">
			<!-- 单独的那个全选按钮 -->
			<view style="display: flex; margin-left:50rpx;font-size: 28rpx;align-items: center;">
				<checkbox-group @change="allChoose">
					<label>
						<checkbox value="all" :class="{'checked':allChecked}" :checked="allChecked?true:false">
						</checkbox>
						全选
					</label>
				</checkbox-group>
				<view
					style="display: flex;flex-direction: column; margin-left: 40rpx;align-items: center;font-size: 25rpx;">
					<text>￥{{zong_price}}</text>
					<text style="margin-top: 5rpx;">共{{zong_shuliang}}件</text>
				</view>
			</view>

			<view @click="xiadan"
				style="display: flex;background-color: red;color: white;justify-content: center;align-items: center; margin-left: 40rpx;height: 100%;width: 230rpx;">
				下单
			</view>
		</view>

	</view>
</template>

<script>
	import uniSwipeAction from '@/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		components: {
			uniSwipeAction,
			uniSwipeActionItem
		},
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				zong_price: 0,
				zong_shuliang: 0,
				// 全选按钮
				allChecked: false,
				checkedArr: [],
				count: 1,
				listchecklist: [],
				listchecklist1: [],
				listchecklist2: [],
				kucun_list: []

			}
		},
		onLoad() {
			
		},
		onShow() {
			let meiyi_name_tel = uni.getStorageSync('meiyi_name_tel')
			this.jingshouren = meiyi_name_tel.name + meiyi_name_tel.mobile
			this.meiyi_name_tel = meiyi_name_tel
			this.get_gouwuchelist()
		},
		methods: {
			handleSwipeClick(e, index) {
				// this.kucun_list[index]._id如果不存在或是空值，则执行
				if (!this.kucun_list[index]._id) {
					return
				}
				if (e.position === 'right' && e.content.text === '删除') {
					console.log(e, index);
					uniCloud.callFunction({
						name: "fun1",
						data: {
							leixing: 19,
							tiaojian: {
								_id: this.kucun_list[index]._id
							}
						}
					}).then(res => {
						console.log("删除成功");
						this.kucun_list.splice(index, 1)
					})
				}
			},
			xiadan() {
				uni.setStorageSync('checkedArr', this.checkedArr)
				// 跳转到页面 confirm
				uni.navigateTo({
					url: '/pages/confirm/confirm'
				})
			},
			handleChange(item, e, n) {
				this.zong_price = 0
				this.zong_shuliang = 0
				this.kucun_list[n].count = e
				for (let item of this.kucun_list) {
					if (this.checkedArr.includes(item)) {
						this.zong_price += parseFloat(item.goods_price) * item.count
						this.zong_shuliang += item.count
					}
				}
				console.log(this.kucun_list);
			},
			allChoose(e) {
				let chooseItem = e.detail.value;
				this.zong_price = 0
				this.zong_shuliang = 0
				// 全选
				if (chooseItem[0] == 'all') {
					this.allChecked = true;
					for (let item of this.kucun_list) {
						if (!this.checkedArr.includes(item)) {
							this.checkedArr.push(item);
						}
					}
					for (let item of this.kucun_list) {
						if (this.checkedArr.includes(item)) {
							this.zong_price += parseFloat(item.goods_price) * item.count
							this.zong_shuliang += item.count
						}
					}

				} else {
					// 取消全选
					this.allChecked = false;
					this.checkedArr = [];

				}
			},
			changeCheckbox(e) {
				this.checkedArr = e.detail.value;
				console.log(this.checkedArr);
				// 如果选择的数组中有值，并且长度等于列表的长度，就是全选
				if (this.checkedArr.length > 0 && this.checkedArr.length == this.kucun_list.length) {
					this.allChecked = true;
				} else {
					this.allChecked = false;
				}
				this.zong_price = 0
				this.zong_shuliang = 0
				for (let item of this.kucun_list) {
					if (this.checkedArr.includes(item)) {
						this.zong_price += parseFloat(item.goods_price) * item.count
						this.zong_shuliang += item.count
					}
				}
			},
			get_gouwuchelist() {
				uniCloud.callFunction({
					name: "funfix1",
					data: {
						leixing: 1,
						user_id: this.meiyi_name_tel._id
					}
				}).then(res => {
					this.kucun_list = res.result.data
				})
			}
		}
	}
</script>

<style>
	/* 背景色为白色 */
	page {
		background-color: #F7FAFC;
	}
</style>